<div class="validation-col">
  <div class="val" *ngIf="policy.minLength">
    <i *ngIf="password?.value?.length === 0; else showSpinner" class="las la-times red"></i>

    <ng-template #showSpinner>
      <div
        *ngIf="
          (password && password.errors && password.errors['minlength']) || password?.value?.length === 0 as currentError;
          else trueminlength
        "
        class="complexity-sp-wrapper"
      >
        <mat-progress-spinner
          class="complexity-spinner"
          diameter="20"
          [color]="currentError ? 'warn' : 'valid'"
          mode="determinate"
          [value]="(password?.value?.length / minLength) * 100"
        >
        </mat-progress-spinner>
      </div>
    </ng-template>
    <ng-template #trueminlength>
      <i class="las la-check green"></i>
    </ng-template>

    <span class="cnsl-secondary-text"
      >{{ 'USER.PASSWORD.MINLENGTHERROR' | translate: { value: policy.minLength } }} ({{ password?.value?.length }}/{{
        policy.minLength
      }})
    </span>
  </div>
  <div class="val" *ngIf="policy.hasSymbol">
    <i *ngIf="password?.pristine || password?.errors?.['errorssymbolerror']" class="las la-times red"></i>
    <i *ngIf="password?.dirty && !password?.errors?.['errorssymbolerror']" class="las la-check green"></i>
    <span class="cnsl-secondary-text"> {{ 'ERRORS.SYMBOLERROR' | translate }}</span>
  </div>
  <div class="val" *ngIf="policy.hasNumber">
    <i *ngIf="password?.pristine || password?.errors?.['errorsnumbererror']" class="las la-times red"></i>
    <i *ngIf="password?.dirty && !password?.errors?.['errorsnumbererror']" class="las la-check green"></i>
    <span class="cnsl-secondary-text"> {{ 'ERRORS.NUMBERERROR' | translate }}</span>
  </div>
  <div class="val" *ngIf="policy.hasUppercase">
    <i *ngIf="password?.pristine || password?.errors?.['errorsuppercasemissing']" class="las la-times red"></i>
    <i *ngIf="password?.dirty && !password?.errors?.['errorsuppercasemissing']" class="las la-check green"></i>
    <span class="cnsl-secondary-text"> {{ 'ERRORS.UPPERCASEMISSING' | translate }}</span>
  </div>
  <div class="val" *ngIf="policy.hasLowercase">
    <i *ngIf="password?.pristine || password?.errors?.['errorslowercasemissing']" class="las la-times red"></i>
    <i *ngIf="password?.dirty && !password?.errors?.['errorslowercasemissing']" class="las la-check green"></i>
    <span class="cnsl-secondary-text">{{ 'ERRORS.LOWERCASEMISSING' | translate }}</span>
  </div>
  <div class="val">
    <i *ngIf="password?.value?.length === 0 || password?.value?.length <= 70" class="las la-check green"></i>
    <i *ngIf="password?.value?.length > 70" class="las la-times red"></i>

    <span class="cnsl-secondary-text"
      >{{ 'USER.PASSWORD.MAXLENGTHERROR' | translate: { value: 70 } }} ({{ password?.value?.length }}/{{ 70 }})
    </span>
  </div>
</div>
